<template>
  <v-container class='pa-0' fluid>
    <v-card outlined>
      <v-card-title class='pb-0'>
        <span class='text-h5'>我参与的组织</span>
        <v-spacer></v-spacer>
      </v-card-title>
      <v-card-text class='pa-4'>
        <div class='text-left'>
          <v-chip
            v-for='(item,index) in groupItems'
            :key='item.ID'
            class='ma-2'
            color="secondary"
            :outlined='!item.selected'
            draggable
            @click='selectGroup(item.GROUP_NAME,index)'
            v-text='item.GROUP_NAME'
          >
          </v-chip>
        </div>
      </v-card-text>
    </v-card>
    <images-gallery
      v-if="selectedGroup!==''"
      :group-name='selectedGroup'
      :images='images'
      :cardIcon='cardIcon'
      :menu-list='menuList'
      :isReadOnly='isReadOnly'
      @freshList='freshList'
    />
    <v-row
      v-else
      justify="center"
      align='center'
      id='emptyRow'
    >
      <h1>
        请点击标签选择团队~
      </h1>
    </v-row>
  </v-container>
</template>

<script>
  import imagesGallery from '@/components/album/ImagesGallery'
  import imagesApi from '@/api/apiPath/imagesApi'
  import _array from 'lodash/array'
  import groupApi from '@/api/apiPath/groupApi'

  export default {
    name: 'ImagesGroupIterator',
    props: {
      user: {
        default: {}
      },
      images: {
        default: []
      }
    },
    components: {
      imagesGallery
    },
    computed: {
      imgUrls() {
        return this.images.map(o => o.url)
      },
      cardIcon: {
        get() {
          if (this.isReadOnly) {
            return [
              {
                icon: 'mdi-information',
                toolTip: '查看详细',
                func: 'showDetail'
              },
              {
                icon: 'mdi-content-save',
                toolTip: '保存图片',
                func: 'showProcess'
              }
            ]
          }
          return [
            {
              icon: 'mdi-information',
              toolTip: '查看详细',
              func: 'showDetail'
            },
            {
              icon: 'mdi-delete',
              toolTip: '删除图片',
              func: 'deleteImgDialog'
            }
          ]
        }
      },
      menuList: {
        get() {
          if (this.isReadOnly) {
            return []
          }
          return [
            {
              icon: 'mdi-gesture',
              toolTip: '编辑图片',
              func: 'showProcess'
            }
          ]
        }
      }
    },
    data() {
      return {
        groupItems: [],
        selectedGroup: '',
        isReadOnly: false
      }
    },
    async created() {
      this.freshList()
      await this.getGroups()
    },
    watch: {
      selectedGroup: {
        handler(val) {
          this.$emit('freshList',val ? { group: val } : null)
        }
      }
    },
    methods: {
      freshList() {
        this.$emit('freshList',this.selectedGroup ? { group: this.selectedGroup } : null)
      },
      async getGroups() {
        const { data: result } = await groupApi.getGroupList({ id: this.user.id })
        this.groupItems = result
        this.groupItems.forEach(item => {
          item.selected = false
        })
        this.selectedGroup = ''
      },
      async selectGroup(val, index) {
        this.groupItems.forEach(item => {
          item.selected = false
        })
        if (val !== this.selectedGroup) {
          this.groupItems[index].selected = true
          this.selectedGroup = val
          const { data: result } = await groupApi.getAuth(this.groupItems[index].ID)
          this.isReadOnly = result.isReadOnly
        } else {
          this.selectedGroup = ''
        }
      }
    }
  }
</script>

<style scoped>
  #emptyRow{
    height: 200px;
  }
</style>
